<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'dictList.jsp' starting page</title>

<title>欢迎登录</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="resources/css/bootstrap/bootstrap.css" type="text/css"
	rel="stylesheet">
<script type="text/javascript"
	src="resources/js/framejs/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="resources/js/jqPaginator.js"></script>
<style type="text/css">
.table {
	table-layout: fixed;
	width: 98% border:0px;
	margin: 0px;
}

.table tr td {
	text-overflow: ellipsis; /* for IE */
	-moz-text-overflow: ellipsis; /* for Firefox,mozilla */
	overflow: hidden;
	white-space: nowrap;
	border: 1px solid;
	text-align: left
}
</style>
</head>

<body>
	<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid">
		<div class="navbar-header">
			<a class="navbar-brand" href="javacript:void(0);">词典编辑</a>
		</div>
		<div>
			<ul class="nav navbar-nav">
				<li class="${dictCo.dictType == 0 ? active : '' }"><a
					href="javascript:typeButton(0);">全部</a></li>
				<li class="${dictCo.dictType == 1 ? active : '' }"><a
					href="javascript:typeButton(1);">英译中</a></li>
				<li class="${dictCo.dictType == 2 ? active : '' }"><a
					href="javascript:typeButton(2);">中译英</a></li>
				<input type="hidden" id="dicyType" value="${dictCo.dictType }">
			</ul>
		</div>

		<div>
			<form class="navbar-form navbar-left" role="search">
				<div class="form-group">
					<input type="text" id="byName" class="form-control"
						placeholder="请输入要搜索的内容" value="${dictCo.byName}">
				</div>
				<button type="button" id="search" class="btn btn-default">查找</button>
			</form>
		</div>
	</div>
	</nav>
	<div class="container-fluid" style="float:left;width:80%">
		<div class="row-fluid">
			<div class="span12">
				<div class="panel panel-default">
					<form class="form-search"></form>
					<table class="table" width="500px">
						<thead>
							<tr>
								<th width="5%">编号</th>
								<th width="30%">词条</th>
								<th width="30%">词义</th>
								<th width="25%">解释</th>
								<th width="20%">操作</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${dictList.list}" var="dict" varStatus="i">
								<c:choose>
									<c:when test="${i.index % 2 == 0 }">
										<tr class="success">
									</c:when>
									<c:when test="${i.index % 2 == 1 }">
										<tr>
									</c:when>
								</c:choose>
								<td width="5%">${i.index + 1}</td>
								<td width="30%" id="byName${dict.dictId }">${dict.byName }</td>
								<td width="30%" id="toName${dict.dictId }" tdValue="${dict.toName}">${fn:replace(dict.toName, '<br>', '')}</div></td>
								<td width="15%" id="translate${dict.dictId }" tdValue="${dict.translate}">${fn:replace(dict.translate, '<br>', '')}</td>
								<td width="20%" id=""><button type="button"
										class="btn btn-success" onclick="editDict(${dict.dictId });">修改</button>
									<button style="margin-left:20px;" type="button"
										class="btn btn-success" onclick="removeDict(${dict.dictId});">删除</button></td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
					<div style="text-align:center;" class="paginations">
						<ul class="pagination" id="pagination1"></ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid" style="float:left">
		<form id="editForm">
			<div class="row clearfix">
				<div class="col-md-12 column">
					<form role="form">
						<input type="hidden" value="" id="editDictId">
						<div class="form-group">
							<label for="exampleInputEmail1">词条</label>
							<textarea rows="4" cols="26" class="form-control" id="editByName"></textarea>
						</div>
						<div class="form-group">
							<label for="exampleInputEmail1">词义</label>
							<textarea rows="4" cols="26" class="form-control" id="editToName"></textarea>
						</div>
						<div class="form-group">
							<label for="exampleInputPassword1">解释</label>
							<textarea rows="4" cols="26" class="form-control"
								id="editTranslate"></textarea>
						</div>
						<button type="button" onclick="submitDict();"
							class="btn btn-default">提交</button>
					</form>
				</div>
				<script type="text/javascript">
					function getReqUrl() {
						var reqUrl = "";
						var byName = $("#byName").val();
						var dictType = $("#dicyType").val();
						if (byName != "") {
							reqUrl += "&byName=" + byName;
						}
						if (dictType != "") {
							reqUrl += "&dictType=" + dictType;
						}
						return reqUrl;
					}
					$("#search")
							.click(
									function() {
										var byName = $("#byName").val();
										window.location.href = "dict/getDictList?byName="
												+ byName;
									});
					pageSize = 10;
					totalCount = parseInt(${dictList.Pagination.totalCount});
					pageSize = parseInt(${dictList.Pagination.pageSize});
					pageNo = parseInt(${dictList.Pagination.pageNo});
					page = parseInt(totalCount / pageSize);
					status = 0;
					totalPage = parseInt(totalCount % pageSize == 0 ? totalCount
							/ pageSize
							: totalCount / pageSize + 1);
					function editDict(dictId) {
						var reg=new RegExp("<br>","g");
						$("#editDictId").val(dictId);
						$("#editByName").val($("#byName" + dictId).text());
						$("#editToName").val($("#toName" + dictId).attr("tdValue").replace(reg,"\r"));
						$("#editTranslate")
								.val($("#translate" + dictId).attr("tdValue").replace(reg,"\r"));
					}
					function typeButton(dictType) {
						window.location.href = "dict/getDictList?dictType="
								+ dictType;
					}
					function removeDict(dictId) {
						if (confirm("确认要删除吗")) {
							window.location.href = "dict/removeDict?pageNo="
									+ pageNo + "&pageSize=" + pageSize
									+ "&dictId=" + dictId + getReqUrl();
						}
					}
					function submitDict() {
						var dictId = $("#editDictId").val() == "" ? 0
								: parseInt($("#editDictId").val());
						window.location.href = "dict/addDict?dictId=" + dictId
								+ "&byName=" + $("#editByName").val()
								+ "&toName=" + $("#editToName").val().replace(new RegExp("\n","gm"),"<br>")
								+ "&translate=" + $("#editTranslate").val().replace(new RegExp("\n","gm"),"<br>");
					}
					function initPageChange(num, type) {
						if (status == 0) {
							status = 1;
							return;
						} else if (status == 1) {
							window.location.href = "dict/getDictList?pageNo="
									+ num + "&pageSize=" + pageSize
									+ getReqUrl();
						}
					}
					$.jqPaginator('#pagination1', {
						totalPages : totalPage,
						visiblePages : pageSize,
						currentPage : pageNo,
						onPageChange : function(num, type) {
							initPageChange(num, type);
						}
					});
					$("#editByName").blur(
							function() {
								$.ajax({
									type : "GET",
									url : "api/dict/get?byName="
											+ $("#editByName").val(),
									dataType : "json",
									success : function(rtnVal) {
										var data = rtnVal.data;
										if (data != null) {
											var reg=new RegExp("<br>","g");
											$("#editByName").val(data.byName);
											$("#editToName").val(data.toName.replace(reg,"\r"));
											$("#editTranslate").val(
													data.translate.replace(reg,"\r"));
										}
									}
								});
							});
				</script>
			</div>
		</form>
	</div>
</body>
</html>
